<template>
  <div class="personal-detail">
    <a-card>
      <h2>员工个人信息</h2>
      <a-divider></a-divider>
      <a-button class="mb20" type="primary" @click="showModal">添加</a-button>
      <a-table :rowKey="(record,index)=> index" :pagination='false' :columns="columns" :data-source="list" bordered>
        <template #currentAccount>
          {{store.state.userInfo.username}}
        </template>
        <template #sex="{record}">
          {{record.sex=='0'?'男':'女'}}
        </template>
        <template #marriage="{record}">
          {{record.marriage=='0'?'未婚':record.marriage=='1'?'已婚':'离异'}}
        </template>
        <template #actions="{record}">
          <a href="javascript:;" @click="edit(record)">编辑</a>
        </template>
      </a-table>
    </a-card>
    <add-person-detail :show="modalVisible" @setShow='setShow'></add-person-detail>

  </div>
</template>

<script>
import { defineComponent, ref, onMounted } from "vue";
import AddPersonDetail from "./components/AddPersonDetail.vue";
import { personalDetail } from "../../service/index";
import { result, deepClone } from "../../utils/result";
import store from "../../store/index";
export default defineComponent({
  components: { AddPersonDetail },
  setup() {
    const columns = [
      {
        title: "用户账号",
        slots: {
          customRender: "currentAccount",
        },
      },
      {
        title: "用户姓名",
        dataIndex: "realName",
      },
      {
        title: "性别",
        slots: {
          customRender: "sex",
        },
      },
      {
        title: "生日",
        dataIndex: "birthday",
      },
      {
        title: "手机号码",
        dataIndex: "phoneNumber",
      },
      {
        title: "籍贯",
        dataIndex: "home",
      },
      {
        title: "婚姻状况",
        slots: {
          customRender: "marriage",
        },
      },
      {
        title: "操作",
        slots: {
          customRender: "actions",
        },
      },
    ];

    //控制抽屉显示隐藏
    const modalVisible = ref(false);
    const showModal = () => {
      modalVisible.value = true;
    };

    const list = ref([]);
    const getData = async () => {
      const res = await personalDetail.search(store.state.userInfo._id);
      console.log("打印getData接口", res);
      if (res.data.code == 200) {
        // list.value.push(res.data.data);
        // list.value = res.data.data;
        list.value[0]=res.data.data
        console.log('res.data.data',res.data.data);
      }
      // result(res).success((res) => {
      //   // console.log("打印getData接口", res.data);
      //   list.value.push(res.data);
      //   // console.log("打印list", list.value);
      // });
    };
    const setShow = (payload) => {
      // console.log("setShow打印payload", payload);
      modalVisible.value = false;
      getData();
    };

    onMounted(() => {
      getData();
    });

    //编辑
    const edit = (record) => {
      modalVisible.value = true;
    };

    return {
      store,
      columns,
      modalVisible,
      showModal,
      list,
      setShow,
      edit,
    };
  },
});
</script>

<style lang="less" scoped>
@import url("../../assets/styles/common.less");
</style>